<div class="row">
    <div class="col-md-12">
        <div class="btn-toolbar" role="toolbar">

            <div class="btn-group" if-permission="manageProcedure" allowed="{{userPermissions}}">
                <button class="btn btn-sm btn-primary" ng-click="$vm.addProcedure()">
                    <i class="glyphicon glyphicon-plus"></i>
                    Add TTP
                </button>
            </div>

            <div class="btn-group" uib-dropdown>
                <button class="btn btn-sm btn-primary dropdown-toggle" uib-dropdown-toggle type="button">
                    <i class="fa fa-sort"></i>
                    Sort by
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" uib-dropdown-menu>
                    <li>
                        <a ng-click="$vm.sortBy(['-_createdAt'])">Newest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['+_createdAt'])">Oldest first</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['-_updatedAt'])">Recently updated</a>
                    </li>
                    <li>
                        <a ng-click="$vm.sortBy(['+_updatedAt'])">Least recently updated</a>
                    </li>
                </ul>
            </div>

            <div class="btn-group pull-right" role="group">
                <page-sizer collection="$vm.list" sizes="[10, 15, 30, 100]"></page-sizer>
            </div>

            <div class="btn-group pull-right" role="group">
                <button class="btn btn-sm"
                    ng-class="{true: 'btn-primary', false:'btn-default'}[$vm.filtering.context.showFilters]"
                    type="button" ng-click="$vm.toggleFilters()">
                    <i class="fa fa-search"></i> Filters
                </button>
            </div>
        </div>
    </div>
</div>
